<template>
  <div>
    <Header></Header>
    <div class="youer-container">
      <div class="hudongketang" style="position:relative;">
        <div style="width:160px;text-align:center;font-size:16px;color:#000;position:absolute;right:0;top:-50px;">
          <img src="/images/qrcode/gangqin.png" alt="" style="width:120px;height:120px;">
          <p>扫一扫生成产品</p>
          <p>相关图文介绍文档预览</p>
        </div>
        <div class="title title-long">
          <h2>智慧钢琴课堂</h2>
          <p>WISDOM PIANO CLASS</p>
        </div>
        <div class="ketang-cont">
          <div class="ketang-text">
            <p>采用“云服务器+本地课程主机+智能钢琴+Pad”的互联网部署解决方案，数字化、互动式创新模式，助力学校专业音乐教室的建设和普及。</p>
            <p>打破了传统钢琴教学法只注重技巧练习的现状，将听音、视唱、乐理知识、音乐欣赏、简单音乐史等音乐必备基础知识融合在钢琴课程中。提高学生音乐素养的同时，强化键盘技巧训练。</p>
          </div>
        </div>
      </div>
      <div class="shezhi">
        <div class="shezhi-title">
          <h3>课程设置</h3>
        </div>
        <div class="shezhi-cont">
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi1.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程时长</h4>
            </div>
            <div class="shezhi-explain">
              <p>45-50分钟/课时</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi2.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>适合群体</h4>
            </div>
            <div class="shezhi-explain">
              <p>4-12岁学龄学生</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi3.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程形式</h4>
            </div>
            <div class="shezhi-explain">
              <p>一对多集体课，学校专业音乐教室</p>
            </div>
          </div>
        </div>
      </div>
      <div class="kechengtese">
        <div class="title">
          <h2>课程特色</h2>
          <p>COURSE CHARACTERISTICS</p>
        </div>
        <div class="tese-cont">
          <div class="tese-item">
            <div class="tese-num">
              <span>01</span>
            </div>
            <div class="tese-img">
              <img src="/images/gangqin/kecheng1.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>解决一对多教学难题</h4>
              <p>通过智能跟灯提示、人琴互动等技术，提高老师的教学效率，使得老师可同时与数十位学生进行互动。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>02</span>
            </div>
            <div class="tese-img">
              <img src="/images/gangqin/kecheng2.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>无需备课 解决师资问题</h4>
              <p>老师通过简单操作即可进行专业课程教学，降低了专业器乐教学对老师要求偏高的问题。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>03</span>
            </div>
            <div class="tese-img">
              <img src="/images/gangqin/kecheng3.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>互动教学 学生乐学</h4>
              <p>学生通过Pad操作，提高了互动性，让学生充分参与到教学中，增加了趣味性。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>04</span>
            </div>
            <div class="tese-img">
              <img src="/images/gangqin/kecheng4.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>全面培养音乐素养</h4>
              <p>教学内容充分满足教育部教学大纲要求，充分培养音乐素养及音乐技能。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="jiaoshi">
        <div class="title">
          <h2>教室案例</h2>
          <p>COMPANY NEW CENTER</p>
        </div>
        <div class="jiaoshi-cont">
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/gangqin1.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/gangqin2.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/gangqin3.jpg" alt="">
          </div>
          <div class="jiaoshi-item">
            <img src="/images/jiaoshi/gangqin4.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
  head () {
    return {
      title: '智慧钢琴课堂-河南酷音智能科技有限公司'
    }
  },
  data() {
    return {}
  },
  components: {
    Header, Footer
  }
}
</script>

<style lang="less" scoped>
.youer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  &::after {
    content: '';
    width: 182px;
    height: 12px;
    background: url(/images/youer/titlebg.png) no-repeat;
    position: absolute;
    top: 65px;
  }

  &.title-long {

    &::after {
      width: 464px;
      background: url(/images/youer/titlebg_long.png) no-repeat;
    }
  }

  h2 {
    font-size: 36px;
    color: #000;
  }

  p {
    margin-top: 30px;
    font-size: 18px;
    color: #959595;
  }
}
.hudongketang {
  margin-top: 115px;

  .ketang-cont {
    width: 1200px;
    height: 264px;
    margin-top: 70px;
    background: url(/images/youer/ketangbg.png) no-repeat;
    overflow: hidden;

    .ketang-text {
      width: 880px;
      margin-top: 70px;
      margin-left: 270px;
    }

    p {
      font-size: 18px;
      color: #000;
      line-height: 2;
    }
  }
}
.shezhi {
  margin-top: 120px;

  .shezhi-title {
    text-align: center;
    margin-bottom: 60px;

    h3 {
      font-weight: normal;
      font-size: 30px;
      color: #000;
      letter-spacing: 2px;
    }
  }

  .shezhi-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .shezhi-item {
    width: 276px;
    height: 276px;
    margin: 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #31b1eb;

    .shezhi-img {
      display: flex;
      height: 140px;
      align-items: center;
    }

    h4 {
      font-size: 26px;
      color: #00a0e9;
    }

    .shezhi-explain {
      padding: 0 25px;
    }

    p {
      margin-top: 17px;
      font-size: 22px;
      color: #000;
    }
  }
}
.kechengtese {
  margin-top: 120px;

  .tese-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tese-item {
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin-bottom: 65px;
    padding: 35px 40px 35px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;

    &:last-child {
      margin: 0;
    }
  }

  .tese-num {
    flex-shrink: 0;

    span {
      display: inline-block;
      width: 55px;
      height: 65px;
      border-radius: 6px;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-size: 24px;
      background: #5ac1ef;
    }
  }

  .tese-img {
    flex-shrink: 0;
    width: 270px;
    height: 175px;
    margin-left: 45px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tese-explain {
    margin-left: 45px;

    h4 {
      font-weight: normal;
      font-size: 24px;
      color: #00a0e9;
    }

    p {
      margin-top: 20px;
      font-size: 18px;
      color: #000;
      line-height: 36px;
    }
  }
}
.kechenghuanjie {
  width: 1190px;
  margin: 120px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .huanjie-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .huanjie-item {
    width: 215px;
    margin: 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    .huanjie-img {
      display: flex;
      justify-content: flex-end;
      height: 82px;

      img {
        width: auto;
        height: auto;
      }
    }

    .huanjie-text {
      display: flex;
      // justify-content: center;
      height: 210px;
      padding: 35px 25px 0;
      margin: 25px 0 0;
      border: 2px solid #96ddff;

      p {
        font-size: 18px;
        text-align: left;
        letter-spacing: 2px;
        line-height: 36px;
      }
    }

    .huanjie-type {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #96ddff;

      p {
        text-align: center;
        font-size: 26px;
        color: #024369;
      }
    }
  }
}
.jiaoshi {
  margin: 120px auto 110px;

  .jiaoshi-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .jiaoshi-item {
    margin: 0 25px;

    img {
      width: 258px;
      height: 258px;
    }
  }
}
</style>
